import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    window.$appRoot = this
    this.handsontableData = [[200.00000000,2.00000000]];
  //   this.handsontableData = this.handsontableData.map(row => {
  //     return row.map(cell => {
  //         return {value:cell}
  //     })
  // })
    this.hot = React.createRef()
    this.hotSettings = {
      data: this.handsontableData,
      licenseKey:'22061-34b57-72013-74b09-0e213',
      rowHeaders: true,
      // startRows:5,
      colHeaders: true,
      colWidths: 150,
      // fixedRowsTop: 4,
      // fixedColumnsLeft: 4,
      contextMenu: {
        items: {
          'option1': {
            name: 'option1'
          },
        }
      },      
      contextMenu:true,
      cells (row,col,prop) {
        if (row == 2 && col == 2) {
          // 控制只读
          let pattern = {
              output: "percent"
          };
          this.type = 'numeric';
          this.numericFormat = {
              pattern
          };          
        }
        this.type = 'numeric';
        this.numericFormat = {
            pattern: {
              mantissa:10
            }
        };          
      },
      afterRenderer (TD, row, col, prop, value, cellProperties) {
        // console.warn(row, col, prop, value,cellProperties)
        // TD.innerText = value.value
        // 控制只读
        // cellProperties.readOnly = true
      }          
    };    
  }
  afterRenderer =  (TD, row, col, prop, value, cellProperties) => {
    // console.log(TD, row, col, prop, value, cellProperties)

    // let icon = document.createElement('span')
    // icon.innerText = '图标'
    // icon.classList.add('canzhao-icon')
    // TD.appendChild(icon);
    // console.warn(value)
    // return value
  }

  componentDidMount () {

  }
  render() {
      console.warn('AAA')
    return (
      <div style={{width:'900px',height:'900px',overflow: 'auto'}}>
        <HotTable
          id="hot"
          ref={this.hot}
          settings={this.hotSettings}
          />
      </div>
    );
  }
}

